﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="style/global.css" rel="stylesheet" />
    <link href="style/reset.css" rel="stylesheet" />
    <link href="style/style.css" rel="stylesheet" />
    <link href="style/css/font-awesome.min.css" rel="stylesheet" />
    <!--[if lt IE 9]>
        <script src="script/html5.js"></script>
    <![endif]-->
    <!--[if IE 7]>
        <link href="style/css/font-awesome-ie7.min.css" rel="stylesheet" />
    <![endif]-->
			<style>
				.ib-main a{
					cursor:pointer;
				}
				.ib-main-wrapper{
					position:relative;
					top:0px;
					bottom:24px;
					overflow:hidden;
                    margin-top:0;
				}
			</style>

    <script id="previewTmpl" type="text/x-jquery-tmpl">
			<div id="ib-img-preview" class="ib-preview">
                <img src="${src}" alt="" class="ib-preview-img"/>
                <span class="ib-preview-descr" style="display:none;">${description}</span>
                <div class="ib-nav" style="display:none;">
                    <span class="ib-nav-prev">Previous</span>
                    <span class="ib-nav-next">Next</span>
                </div>
                <span class="ib-close" style="display:none;">Close Preview</span>
                <div class="ib-loading-large" style="display:none;">Loading...</div>
            </div>		
		</script>
		<script id="contentTmpl" type="text/x-jquery-tmpl">	
			<div id="ib-content-preview" class="ib-content-preview">
                <div class="ib-teaser" style="display:none;">{{html teaser}}</div>
                <div class="ib-content-full" style="display:none;">{{html content}}</div>
                <span class="ib-close" style="display:none;">Close Preview</span>
            </div>
		</script>	
</head>
<body>
        <header style="opacity:1;filter:none;z-index:12">
        <div class="logo">
            <a href="#">
                <img src="style/images/logo.png" style="width:300px" />
            </a>
        </div>
        <div class="banner">
            <div style="width:100%;height: 40px;overflow: hidden;">
                <div class="bannerOne colorGray" id="b1"><i class="icon-list-ul"></i> 新闻动态</div>
                <div class="bannerOne colorLightGray" id="b2"><i class="icon-heart"></i> 校友分会</div>
                <div class="bannerOne colorGreen" id="b3"><i class="icon-thumbs-up"></i> 校友录</div>
            </div>
            <div style="width:100%;min-height: 60px;overflow: hidden;">
                <div class="bannerTwo colorGray" id="btag1">
                    <div><a href="#">学校动态</a></div>
                    <div><a href="#">树人风采</a></div>
                    <div><a href="#">校友捐赠</a></div>
                    <div><a href="#">树人有约</a></div>
                    <div><a href="#">学校动态</a></div>
                    <div><a href="#">树人风采</a></div>
                    <div><a href="#">校友捐赠</a></div>
                    <div><a href="#">树人有约</a></div>
                    <div><a href="#">其他消息</a></div>
                </div>
                <div class="bannerTwo colorLightGray" id="btag2" style="margin-left: 33.3%;">
                    <div><a href="#">义乌分会</a></div>
                    <div><a href="#">嘉善分会</a></div>
                    <div><a href="#">日本分会</a></div>
                    <div><a href="#">温州分会</a></div>
                    <div><a href="#">宁波分会</a></div>
                    <div><a href="#">杭州分会</a></div>
                    <div><a href="#">金华分会</a></div>
                    <div><a href="#">台州分会</a></div>
                    <div><a href="#">更多分会</a></div>
                </div>
                <div class="bannerTwo colorGreen" id="btag3" style="margin-left: 66.6%;">
                    <div><a href="#">校友登记</a></div>
                    <div><a href="#">校友查询</a></div>
                    <div><a href="#">校友留言</a></div>
                    <div><a href="#">校友活动</a></div>
                    <div><a href="#">班级录</a></div>
                    <div><a href="#">个人中心</a></div>
                </div>
            </div>
        </div>
        <div class="search">
            <input id="Text1" type="text" class="searchInput" /><input id="Button1" type="button" value="" class="searchButton" />

        </div>
    </header>
    <div class="classes">
        <div class="current" style="margin-bottom:10px"><i class="icon-home"></i> 当前位置：首页-校友列表</div>
        <div class="left">
            <div class="gallery" id="gallery" style="height:400px;overflow:hidden">

                <div id="ib-main-wrapper" class="ib-main-wrapper kinetic-active" style="height: 337px; cursor: move;" tabindex="0">
                <div class="ib-main">
                    <a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					<a href="#" class="ib-content">
                        <div class="ib-teaser">
                            <h2>Welcome <span>Howdy, Stranger</span></h2>
                        </div>
                        <div class="ib-content-full">
                            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                            <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                            <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                        </div>
                    </a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					<a href="#" class="ib-content">
                        <div class="ib-teaser">
                            <h2>Welcome <span>Howdy, Stranger</span></h2>
                        </div>
                        <div class="ib-content-full">
                            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                            <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                            <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                        </div>
                    </a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"><span>Youth is full of pleasance</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"><span>Crabbed Age and Youth</span></a>
					<a href="#" class="ib-image"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"><span>Cannot live together</span></a>
					
					<div class="clr"></div>
				</div><!-- ib-main -->
            </div>
            </div>
        </div>
        <div class="right">
            <div class="person">
                个人中心
            </div>
        </div>
    </div>
    <footer style="position:relative;z-index:-1">
        <div class="left">
            Copyright &copy; 2008-2013 浙ICP:110402430004号
            <p>地址：浙江省杭州市拱墅区树人街8号 邮编：310015 电话：0571-88298522</p>
        </div>
        <div class="right">
            <a href="#">旧版主页</a> |
            <a href="#">隐私版权</a> |
            <a href="#">联系我们</a> |
            <a href="#">网站地图</a> |
            <p>Designed by 小D & Powered by dsrj.net</p>
        </div>
    </footer>
    <script src="script/jquery-1.8.1.js"></script>
    <script src="script/jquery.easing.1.3.js"></script>
    <script src="script/jquery.kinetic.js"></script>
    <script src="script/jquery.tmpl.min.js"></script>
    <script>
        $(document).ready(function () {
            var bwidth = $(window).width() * 0.8 - 530;
            $("header .banner").css("width", bwidth);
            var totalwidth = ($(window).width() * 0.8 - 48);
            $(".main .big").css("width", totalwidth * 2 / 5);
            $(".main .small").css("width", totalwidth / 5);
            $("#gallery").css("height", $(window).height() - 232);
            $(".person").css("height", $(window).height() - 232);
            $(window).resize(function () {
                bwidth = $(window).width() * 0.8 - 530;
                $("header .banner").css("width", bwidth);
                totalwidth = ($(window).width() * 0.8 - 48);
                $(".main .big").css("width", totalwidth * 2 / 5);
                $(".main .small").css("width", totalwidth / 5);
                $("#gallery").css("height", $(document).height() - 232);
                $(".person").css("height", $(window).height() - 232);
            });
            hidebannerTag();
            showbannerTag(1);
            showbannerTag(2);
            showbannerTag(3);
        })
        function showbannerTag(id) {
            $("#b" + id).hover(function () {
                hidebannerTag();
                $("#btag" + id).show();
                $("#b" + id).css({ "background": "transparent", "color": "#fff" });
            });
            $("#btag" + id).hover(function () { }, function () { hidebannerTag(); });
        }
        function hidebannerTag() {
            $("#btag1").hide(); $("#btag2").hide(); $("#btag3").hide();
            $("#b1").css({ "background": "#AB8A6C", "color": "#533335" });
            $("#b2").css({ "background": "#CCB18E", "color": "#533335" });
            $("#b3").css({ "background": "#948E73", "color": "#533335" });
        }
    </script>
    <script type="text/javascript">
        $(function () {
            var $ibWrapper = $('#ib-main-wrapper'),
                Template = (function () {
                    // true if dragging the container
                    var kinetic_moving = false,
                        // current index of the opened item
                        current = -1,
                        // true if the item is being opened / closed
                        isAnimating = false,
                        // items on the grid
                        $ibItems = $ibWrapper.find('div.ib-main > a'),
                        // image items on the grid
                        $ibImgItems = $ibItems.not('.ib-content'),
                        // total image items on the grid
                        imgItemsCount = $ibImgItems.length,
                        init = function () {
                            // add a class ib-image to the image items
                            $ibImgItems.addClass('ib-image');
                            // apply the kinetic plugin to the wrapper
                            loadKinetic();
                            // load some events
                            initEvents();
                        },
                        loadKinetic = function () {
                            setWrapperSize();
                            $ibWrapper.kinetic({
                                moved: function () {
                                    kinetic_moving = true;
                                },
                                stopped: function () {
                                    kinetic_moving = false;
                                }
                            });
                        },
                        setWrapperSize = function () {
                            //var containerMargins = $('#ib-top').outerHeight(true) + $('#header').outerHeight(true) + parseFloat($ibItems.css('margin-top'));
                            $ibWrapper.css('height', $(window).height() - 232)

                        },
                        initEvents = function () {
                            // open the item only if not dragging the container
                            $ibItems.bind('click.ibTemplate', function (event) {
                                if (!kinetic_moving)
                                    openItem($(this));
                                return false;
                            });
                            // on window resize, set the wrapper and preview size accordingly
                            $(window).bind('resize.ibTemplate', function (event) {
                                setWrapperSize();
                                $('#ib-img-preview, #ib-content-preview').css({
                                    width: $(window).width(),
                                    height: $(window).height()
                                })
                            });
                        },
                        openItem = function ($item) {
                            if (isAnimating) return false;
                            // if content item
                            if ($item.hasClass('ib-content')) {
                                isAnimating = true;
                                current = $item.index('.ib-content');
                                loadContentItem($item, function () { isAnimating = false; });
                            }
                                // if image item
                            else {
                                isAnimating = true;
                                current = $item.index('.ib-image');
                                loadImgPreview($item, function () { isAnimating = false; });
                            }

                        },
                        // opens one image item (fullscreen)
                        loadImgPreview = function ($item, callback) {
                            var largeSrc = $item.children('img').data('largesrc'),
                                description = $item.children('span').text(),
                                largeImageData = {
                                    src: largeSrc,
                                    description: description
                                };
                            // preload large image
                            $item.addClass('ib-loading');
                            preloadImage(largeSrc, function () {
                                $item.removeClass('ib-loading');
                                var hasImgPreview = ($('#ib-img-preview').length > 0);
                                if (!hasImgPreview)
                                    $('#previewTmpl').tmpl(largeImageData).insertAfter($ibWrapper);
                                else
                                    $('#ib-img-preview').children('img.ib-preview-img')
                                                        .attr('src', largeSrc)
                                                        .end()
                                                        .find('span.ib-preview-descr')
                                                        .text(description);

                                //get dimentions for the image, based on the windows size
                                var dim = getImageDim(largeSrc);
                                $item.removeClass('ib-img-loading');
                                //set the returned values and show/animate preview
                                $('#ib-img-preview').css({
                                    width: $item.width(),
                                    height: $item.height(),
                                    left: $item.offset().left,
                                    top: $item.offset().top
                                }).children('img.ib-preview-img').hide().css({
                                    width: dim.width,
                                    height: dim.height,
                                    left: dim.left,
                                    top: dim.top
                                }).fadeIn(400).end().show().animate({
                                    width: $(window).width(),
                                    left: 0
                                }, 500, 'easeOutExpo', function () {

                                    $(this).animate({
                                        height: $(window).height(),
                                        top: 0
                                    }, 400, function () {

                                        var $this = $(this);
                                        $this.find('span.ib-preview-descr, span.ib-close').show()
                                        if (imgItemsCount > 1)
                                            $this.find('div.ib-nav').show();
                                        if (callback) callback.call();
                                    });
                                });
                                if (!hasImgPreview)
                                    initImgPreviewEvents();
                            });

                        },
                        // opens one content item (fullscreen)
                        loadContentItem = function ($item, callback) {
                            var hasContentPreview = ($('#ib-content-preview').length > 0),
                                teaser = $item.children('div.ib-teaser').html(),
                                content = $item.children('div.ib-content-full').html(),
                                contentData = {
                                    teaser: teaser,
                                    content: content
                                };
                            if (!hasContentPreview)
                                $('#contentTmpl').tmpl(contentData).insertAfter($ibWrapper);
                            //set the returned values and show/animate preview
                            $('#ib-content-preview').css({
                                width: $item.width(),
                                height: $item.height(),
                                left: $item.offset().left,
                                top: $item.offset().top
                            }).show().animate({
                                width: $(window).width(),
                                left: 0
                            }, 500, 'easeOutExpo', function () {
                                $(this).animate({
                                    height: $(window).height(),
                                    top: 0
                                }, 400, function () {
                                    var $this = $(this),
                                        $teaser = $this.find('div.ib-teaser'),
                                        $content = $this.find('div.ib-content-full'),
                                        $close = $this.find('span.ib-close');
                                    if (hasContentPreview) {
                                        $teaser.html(teaser)
                                        $content.html(content)
                                    }
                                    $teaser.show();
                                    $content.show();
                                    $close.show();
                                    if (callback) callback.call();
                                });
                            });
                            if (!hasContentPreview)
                                initContentPreviewEvents();
                        },
                        // preloads an image
                        preloadImage = function (src, callback) {
                            $('<img/>').load(function () {
                                if (callback) callback.call();
                            }).attr('src', src);
                        },
                        // load the events for the image preview : navigation ,close button, and window resize
                        initImgPreviewEvents = function () {
                            var $preview = $('#ib-img-preview');
                            $preview.find('span.ib-nav-prev').bind('click.ibTemplate', function (event) {
                                navigate('prev');
                            }).end().find('span.ib-nav-next').bind('click.ibTemplate', function (event) {
                                navigate('next');
                            }).end().find('span.ib-close').bind('click.ibTemplate', function (event) {
                                closeImgPreview();
                            });

                            //resizing the window resizes the preview image
                            $(window).bind('resize.ibTemplate', function (event) {
                                var $largeImg = $preview.children('img.ib-preview-img'),
                                    dim = getImageDim($largeImg.attr('src'));
                                $largeImg.css({
                                    width: dim.width,
                                    height: dim.height,
                                    left: dim.left,
                                    top: dim.top
                                })
                            });
                        },
                        // load the events for the content preview : close button
                        initContentPreviewEvents = function () {
                            $('#ib-content-preview').find('span.ib-close').bind('click.ibTemplate', function (event) {
                                closeContentPreview();
                            });
                        },
                        // navigate the image items in fullscreen mode
                        navigate = function (dir) {
                            if (isAnimating) return false;
                            isAnimating = true;
                            var $preview = $('#ib-img-preview'),
                                $loading = $preview.find('div.ib-loading-large');
                            $loading.show();
                            if (dir === 'next') {
                                (current === imgItemsCount - 1) ? current = 0 : ++current;
                            }
                            else if (dir === 'prev') {
                                (current === 0) ? current = imgItemsCount - 1 : --current;
                            }

                            var $item = $ibImgItems.eq(current),
                                largeSrc = $item.children('img').data('largesrc'),
                                description = $item.children('span').text();
                            preloadImage(largeSrc, function () {
                                $loading.hide();
                                //get dimentions for the image, based on the windows size
                                var dim = getImageDim(largeSrc);
                                $preview.children('img.ib-preview-img')
                                                .attr('src', largeSrc)
                                                .css({
                                                    width: dim.width,
                                                    height: dim.height,
                                                    left: dim.left,
                                                    top: dim.top
                                                })
                                                .end()
                                                .find('span.ib-preview-descr')
                                                .text(description);
                                $ibWrapper.scrollTop($item.offset().top)
                                          .scrollLeft($item.offset().left);
                                isAnimating = false;
                            });
                        },
                        // closes the fullscreen image item
                        closeImgPreview = function () {
                            if (isAnimating) return false;
                            isAnimating = true;
                            var $item = $ibImgItems.eq(current);
                            $('#ib-img-preview').find('span.ib-preview-descr, div.ib-nav, span.ib-close')
                                            .hide()
                                            .end()
                                            .animate({
                                                height: $item.height(),
                                                top: $item.offset().top
                                            }, 500, 'easeOutExpo', function () {

                                                $(this).animate({
                                                    width: $item.width(),
                                                    left: $item.offset().left
                                                }, 400, function () {

                                                    $(this).fadeOut(function () { isAnimating = false; });
                                                });
                                            });

                        },
                        // closes the fullscreen content item
                        closeContentPreview = function () {
                            if (isAnimating) return false;
                            isAnimating = true;
                            var $item = $ibItems.not('.ib-image').eq(current);
                            $('#ib-content-preview').find('div.ib-teaser, div.ib-content-full, span.ib-close')
                                                    .hide()
                                                    .end()
                                                    .animate({
                                                        height: $item.height(),
                                                        top: $item.offset().top
                                                    }, 500, 'easeOutExpo', function () {
                                                        $(this).animate({
                                                            width: $item.width(),
                                                            left: $item.offset().left
                                                        }, 400, function () {

                                                            $(this).fadeOut(function () { isAnimating = false; });
                                                        });
                                                    });
                        },
                        // get the size of one image to make it full size and centered
                        getImageDim = function (src) {
                            var img = new Image();
                            img.src = src;
                            var w_w = $(window).width(),
                                w_h = $(window).height(),
                                r_w = w_h / w_w,
                                i_w = img.width,
                                i_h = img.height,
                                r_i = i_h / i_w,
                                new_w, new_h,
                                new_left, new_top;
                            if (r_w > r_i) {
                                new_h = w_h;
                                new_w = w_h / r_i;
                            }
                            else {
                                new_h = w_w * r_i;
                                new_w = w_w;
                            }
                            return {
                                width: new_w,
                                height: new_h,
                                left: (w_w - new_w) / 2,
                                top: (w_h - new_h) / 2
                            };
                        };
                    return { init: init };
                })();
            Template.init();
        });
        </script>
</body>
</html>
